<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
			    margin: 0;
			    padding: 0;
			}
			 
			ul, ol {
			    list-style: none;
			}
			 
			input, button {
			    outline: none;
			    border: none;
			}
			 
			a {
			    text-decoration: none;
			}
			 
			.clearfix::before,
			.clearfix::after {
			    content: "";
			    height: 0;
			    line-height: 0;
			    display: block;
			    visibility: hidden;
			}
			 
			.clearfix::after {
			    clear: both;
			}
			 
			body {
			    padding: 100px;
			    background-color: #f5f5f5;
			}
			 
			.product li {
			    float: left;
			    width: 200px;
			    height: 100px;
			    padding: 34px 0 20px;
			    z-index: 1;
			    margin-left: 30px;
			    margin-bottom: 20px;
			    background: #fff;
			    -webkit-transition: all .2s linear;
			    transition: all .2s linear;
			    position: relative;
			}	 
			.product li h3 {
			    margin: 0 10px;
			    font-size: 14px;
			    font-weight: 400;
			    text-align: center;
			}
			 
			.product li h3 a {
			    color: #333;
			}
			 
			.desc {
			    margin: 0 10px 10px;
			    height: 18px;
			    font-size: 12px;
			    text-align: center;
			    text-overflow: ellipsis;
			    white-space: nowrap;
			    overflow: hidden;
			    color: #b0b0b0;
			}
			 
			.price {
			    font-size: 14px;
			    margin: 0 10px 10px;
			    text-align: center;
			    color: #ff6700;
			}
			 
			.price del {
			    color: #b0b0b0;
			}
			 
			.review {
			    position: absolute;
			    bottom: 0;
			    left: 0;
			    z-index: 3;
			    width: 234px;
			    height: 0;
			    overflow: hidden;
			    font-size: 12px;
			    background: #ff6700;
			    opacity: 0;
			    -webkit-transition: all .2s linear;
			    transition: all .2s linear;
			}
			 
			.review a {
			    color: #757575;
			    display: block;
			    padding: 8px 30px;
			    outline: 0;
			}
			 
			.review a span {
			    display: block;
			    margin-bottom: 5px;
			    color: #fff;
			}
			 
			.product li:hover {
			    -webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);
			    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
			    -webkit-transform: translate3d(0, -2px, 0);
			    transform: translate3d(0, -2px, 0);
			}
			 
			.product li:hover .review {
			    opacity: 1;
			    height: 76px;
			}
			#meetingLabel{
				width:50px; 
				text-align:center; 
				border:1px solid #ffffff; 
				padding:7px 0; 
				background-color: #ff9799;" 
			}
			
			#meetingLabel2{
				width:50px; 
				text-align:center; 
				border:1px solid #ffffff; 
				padding:7px 0; 
				background-color: #55ff7f;" 
			}
			
			#meetingLabel3{
				width:50px; 
				text-align:center; 
				border:1px solid #ffffff; 
				padding:7px 0; 
				background-color: #feff89;" 
			}
			
			.review {
			    position: absolute;
			    bottom: 0;
			    left: 0;
			    z-index: 3;
			    width: 200px;
			    height: 0;
			    overflow: hidden;
			    font-size: 12px;
			    background: #f2f5ff;
			    opacity: 0;
			    -webkit-transition: all .2s linear;
			    transition: all .2s linear;
			}
			 
			.review a {
			    color: #aaffff;
			    display: block;
			    padding: 8px 30px;
			    outline: 0;
			}
			 
			
			.review a button {
			  display: inline-block;
			  /* height: 20px; */
			  padding: 15px 25px;
			  font-size: 12px;
			  cursor: pointer;
			  text-align: center;   
			  text-decoration: none;
			  outline: none;
			  color: #fff;
			  background-color: #217daf;
			  border: none;
			  border-radius: 15px;
			  /* box-shadow: 0 9px #999; */
			  margin-left: 30px;
			}
			
			.review a button:hover {background-color: #235c8e}
			
			.review a button:active {
			  background-color: #308e8b;
			  box-shadow: 0 5px #666;
			  transform: translateY(4px);
			}
		</style>
	</head>
	<body>
		<div id="background">
			<div class="product">
			  <ul>
			   <li style="background-color:rgba(255,85,85,0.2);border-radius:10%">
			    <h3><a href="#" style="font-size: 24px;">C404</a></h3>
				<p class="desc" style="color: rgba(0, 0, 0, 0.5)">容纳人数：48</p>
				<p class="desc" style="color: rgba(0, 0, 0, 0.5)">正在使用</p>
				<td><input style="background-color:rgba(116, 252, 48, 0.6);display:block;border-radius:10%;margin-left: 5px;height:5px;width:40px;line-height:20px;border:none;" id="meetingLabel3" type="text" name="sort[1]" value="音响" /></td>
				<div class="review" style="border-radius: 0% 0% 10% 10%;">
					<a href="book.html" target="right">
						<button value="request">申请</button>
					</a>
					<span style="display: block;margin-top: -10px;">需要审批</span>
			   </div>
			   </li>
			   <li style="background-color:rgba(55, 165, 255, 0.5);border-radius:10%">
			    <h3><a href="#" style="font-size: 24px;">C202</a></h3>
				<p class="desc" style="color: rgba(0, 0, 0, 0.5)">容纳人数：48</p>
				<p class="desc" style="color: rgba(0, 0, 0, 0.5)">空闲中</p>
				<td><input style="background-color:rgba(116, 252, 48, 0.6);display:block;border-radius:10%;margin-left: 5px;height:5px;width:40px;line-height:20px;border:none;" id="meetingLabel3" type="text" name="sort[1]" value="音响" /></td>
				<div class="review" style="border-radius: 0% 0% 10% 10%;">
					<a href="book.html" target="right">
						<button value="request">申请</button>
					</a>
					<span style="display: block;margin-top: -10px;">需要审批</span>
			   </div>
			   </li>
			   <li style="background-color:rgba(255,85,85,0.2);border-radius:10%">
			    <h3><a href="#" style="font-size: 24px;">C302</a></h3>
				<p class="desc" style="color: rgba(0, 0, 0, 0.5)">容纳人数：48</p>
				<p class="desc" style="color: rgba(0, 0, 0, 0.5)">正在使用</p>
				<td><input id="meetingLabel" style="background-color:rgba(248, 252, 59, 0.6);margin-left: 5px;display:block;border-radius:10%;height:5px;width:40px;line-height:20px;border:none;" type="text" name="sort[1]" value="麦克风" /></td>
				<div class="review" style="border-radius: 0% 0% 10% 10%;">
					<a href="book.html" target="right">
						<button value="request">申请</button>
					</a>
					<span style="display: block;margin-top: -10px;">需要审批</span>
			   </div>
			   </li>
				<li style="background-color:rgba(55, 165, 255, 0.5);border-radius:10%">
				  <h3><a href="#" style="font-size: 24px;">C405</a></h3>
				  <p class="desc" style="color: rgba(0, 0, 0, 0.5)">容纳人数：48</p>
				  <p class="desc" style="color: rgba(0, 0, 0, 0.5)">空闲中</p>
				  <td><input id="meetingLabel"  type="text"  style="float:left;margin-left: 5px;background-color:rgba(248, 252, 59, 0.6);display:block;border-radius:10%;height:5px;border:none;width:40px;line-height:20px"  name="sort[1]" value="麦克风" /></td>
				  <td><input id="meetingLabel2" type="text"  style="float:left;margin-left: 5px;background-color:rgb(255, 180, 94);display:block;border-radius:10%;height:5px;border:none;width:40px;line-height:20px"  name="sort[1]" value="大屏幕" /></td>
				  <td><input id="meetingLabel3" type="text"  style="float:left;margin-left: 5px;background-color:rgba(116, 252, 48, 0.6);display:block;border-radius:10%;height:5px;border:none;width:40px;line-height:20px"  name="sort[1]" value="音响" /></td>
				  <div class="review" style="border-radius: 0% 0% 10% 10%;">
					<a href="book.html" target="right">
						<button value="request">申请</button>
					</a>
					<span style="display: block;margin-top: -10px;">需要审批</span>
			   </div>
				</li>
				<li style="background-color:rgba(255,85,85,0.2);border-radius:10%">
				  <h3><a href="#" style="font-size: 24px;">C101</a></h3>
				  <p class="desc" style="color: rgba(0, 0, 0, 0.5)">容纳人数：48</p>
				  <p class="desc" style="color: rgba(0, 0, 0, 0.5)">正在使用</p>
				  <td><input id="meetingLabel" style="background-color:rgba(248, 252, 59, 0.6);display:block;border-radius:10%;margin-left: 5px;height:5px;width:40px;line-height:20px;border:none;" type="text" name="sort[1]" value="麦克风" /></td>
				  <div class="review" style="border-radius: 0% 0% 10% 10%;">
				       <a href="book.html" target="right">
				  		 <button value="request">申请</button>
				       </a>
				  	 <span style="display: block;margin-top: -10px;">需要审批</span>
				  </div>
				</li>
				<li style="background-color:rgba(255,85,85,0.2);border-radius:10%">
				  <h3><a href="#" style="font-size: 24px;">C555</a></h3>
				  <p class="desc" style="color: rgba(0, 0, 0, 0.5)">容纳人数：48</p>
				  <p class="desc" style="color: rgba(0, 0, 0, 0.5)">正在使用</p>
				  <td><input id="meetingLabel" style="float:left;margin-left: 5px;background-color:rgba(248, 252, 59, 0.6);display:block;border-radius:10%;height:5px;width:40px;line-height:20px;border:none;" type="text" name="sort[1]" value="麦克风" /></td>
				  <td><input id="meetingLabel2" style="float:left;background-color:rgb(255, 180, 94);margin-left: 5px;display:block;border-radius:10%;height:5px;width:40px;line-height:20px;border:none;" type="text" name="sort[1]" value="大屏幕" /></td>
				  <td><input id="meetingLabel3" style="float:left;background-color:rgba(116, 252, 48, 0.6);margin-left: 5px;display:block;border-radius:10%;height:5px;width:40px;line-height:20px;border:none;" type="text" name="sort[1]" value="音响" /></td>
				  <div class="review" style="border-radius: 0% 0% 10% 10%;">
					<a href="book.html" target="right">
						<button value="request">申请</button>
					</a>
					<span style="display: block;margin-top: -10px;">需要审批</span>
			   	  </div>
				</li> 
			  </ul>
			  </div>
		</div>
		 </div>
	</body>
	<script>
		function myFunc(){
			alert("申请成功！")
		}
	</script>
</html>
